<template>
  <!-- start 产品模板列表 -->
  <div class="product-template-list-view" ref="productTemplateListPage" v-loading.fullscreen.lock="loadingListData" >
    
    <!-- start 搜索 -->
    <div ref="tableHeaderContainer" class="product-register-list-search-group">

      <!-- start  搜索header -->
      <form class="base-search" onsubmit="return false;">
        <div class="product-template-list-base-search-group input-with-append-search">
          <el-input v-model="searchModel.keyword" :placeholder="$t('common.validate.searchodProductCustomerRegister')" v-trim:blur class="mar-r-12">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
            <el-button
              type="primary"
              slot="append"
              @click="searchModel.pageNum=1;
              search();
              trackEventHandler('search')"
              v-track="$track.formatParams('KEYWORD_SEARCH')"
              native-type="submit">
              {{$t('common.base.search')}}
            </el-button>
          </el-input>
          <el-button type="plain-third" @click="resetParams" v-track="$track.formatParams('RESET_SEARCH')">{{$t('common.base.reset')}}</el-button>
        </div>
        <span class="advanced-search-visible-btn" @click.self.stop="panelSearchAdvancedToggle">
          <i class="iconfont icon-filter"></i>
          {{$t('common.base.advancedSearch')}}
        </span>
      </form>
      <!-- end 搜索 header -->

      <!-- start 高级搜索表单 -->
      <product-template-search-panel
        :config="{
          fields: this.fieldsForSearch,
        }"
        ref="searchPanel"
      >
        <div class="advanced-search-btn-group" slot="footer">
          <el-button type="plain-third" @click="resetParams" v-track="$track.formatParams('RESET_SEARCH')">{{$t('common.base.reset')}}</el-button>
          <el-button type="primary" @click="powerfulSearch" native-type="submit" v-track="$track.formatParams('ADVANCED_SEARCH')">{{$t('common.base.search')}}</el-button>
        </div>
      </product-template-search-panel>
      <!-- end 高级搜索表单 -->

    </div>
    <!-- end 搜索 -->

    <!-- start content -->
    <div class="product-register-list-content">
      <!--operation bar start-->
      <div ref="tableDoContainer" class="operation-bar-container">
        <div class="top-btn-group flex-x">
          <el-button
            type="primary"
            @click="toCreate"
            v-track="$track.formatParams('TO_CREATE')"
            v-if="authCreate">
            <i class="iconfont icon-add2" ></i>{{$t('common.base.create')}}
          </el-button>
          <el-button
            type="plain-third"
            v-if="authDelete"
            @click="productRegisterDelete"
            v-track="$track.formatParams('DELETE')">
            <i class="iconfont icon-delete"></i>
            {{$t('common.base.delete')}}
          </el-button>
        </div>
        <!-- end operation bar-->

        <!-- start 操作按钮组 -->
        <div class="action-button-group">
          <el-dropdown trigger="click" v-if="authExport">
            <span class="el-dropdown-link cur-point" @click="trackEventHandler('moreAction')">
              {{$t('common.base.moreOperator')}}
              <i class="iconfont icon-fdn-select"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <!-- <el-dropdown-item v-if="!isExperienceEdition">
                <div @click="openDialog('importProduct')">导入产品模板</div>
              </el-dropdown-item> -->
              <el-dropdown-item v-if="canProductRegisterExport">
                <div @click="exportProduct(false)" v-track="$track.formatParams('EXPORT', null, 'MORE_ACTIONS')">{{$t('common.base.export')}}</div>
              </el-dropdown-item>
              <el-dropdown-item v-if="canProductRegisterExport">
                <div @click="exportProduct(true)" v-track="$track.formatParams('EXPORT_ALL', null, 'MORE_ACTIONS')">{{$t('common.base.exportAll')}}</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span class="el-dropdown-link cur-point mar-l-12" @click="showAdvancedSetting" v-track="$track.formatParams('SELECT_COLUMN')">
            {{$t('common.base.choiceCol')}}
            <i class="iconfont icon-fdn-select"></i>
          </span>
        </div>
        <!-- end 操作按钮组 -->

      </div>
      <!-- end  -->

      <!-- <div ref="BaseSelectionBarComponent" class="base-selection-wrapper">
        <base-selection-bar ref="baseSelectionBar" v-model="multipleSelection" @toggle-selection="selectionToggle" @show-panel="() => panelTheMultipleSelectionShow = true" />
      </div> -->

      <!-- start 表格 -->
      <div class="bg-w">
        <el-table
          v-table-style
          :data="page.list"
          :row-key="getRowKey"
          stripe
          :border="true"
          @select="selectionHandle"
          @select-all="selectionHandle"
          @sort-change="sortChange"
          :height="tableContainerHeight"
          :highlight-current-row="false"
          header-row-class-name="product-template-table-header"
          ref="productTemplateTable"
          class="product-template-table bbx-normal-list-box">
          <template slot="empty">
            <BaseListForNoData v-show="!loadingListData" :notice-msg="$t('common.base.noData')"></BaseListForNoData>
          </template>

          <el-table-column type="selection" width="48" align="center" class-name="select-column"></el-table-column>
          <el-table-column
            v-for="(column, index) in columns"
            v-if="column.show"
            :key="`${column.field}_${index}`"
            :label="column.label"
            :prop="column.field"
            :width="column.width"
            :min-width="column.minWidth || '120px'"
            :sortable="column.sortable"
            show-overflow-tooltip
            :fixed="column.fixLeft || column.fixed || false"
            :align="column.align">

            <template slot-scope="scope">
              <template v-if="column.field === 'productName'">
                <div class="status-td">
                  <div
                    @click="toRelationProductDetail(scope.row.id)"
                    :class="globalIsHaveProductViewDetailAuth ? 'link' : ''"
                  >
                    {{ scope.row.productName || ''}}
                  </div>
                </div>
              </template>
              <template v-else-if="column.field === 'type'">
                <div class="status-td">
                  <div
                    @click="toProductTypeDetail(scope.row.catalogId)"
                    class="link">
                    {{ scope.row.type || ''}}
                  </div>
                </div>
              </template>
              <template v-else-if="column.field === 'registerStatusStr'">
                <div class="status-td">
                  <div
                    v-if="scope.row.registerStatusStr"
                    class="status-show table-blacklist"
                    :class="{
                      'is-pass': scope.row.registerStatus === 1,
                      'on-audit': scope.row.registerStatus === 0,
                      'is-reject': scope.row.registerStatus === 2
                    }">
                    {{ findStatusDes(scope.row.registerStatus)}}
                  </div>
                  <div v-else></div>
                </div>
              </template>
              <template v-else-if="column.field === 'dataSourceStr'">
                {{ findDataSourceDes(scope.row.dataSource)}}
              </template>
              <template v-else-if="column.formType === 'location'">
                {{ scope.row.attribute[column.field] && scope.row.attribute[column.field].address}}
              </template>
              <template v-else-if="column.formType === 'address'">
                {{ scope.row.attribute[column.field] && scope.row.attribute[column.field].all}}
              </template>
              <template v-else-if="['createUser', 'updateUser'].includes(column.field)">
                {{ scope.row[column.field] && scope.row[column.field].displayName }}
              </template>
              <template v-else-if="['createTime', 'updateTime'].includes(column.field)">
                {{ scope.row[column.field] | formatDate }}
              </template>
              <template v-else-if="column.field === 'operation'">
                <el-dropdown class="dropdown" v-if="scope.row.registerStatus === 1">
                  <span class="cur-point">
                    {{$t('common.base.more')}}<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown" class="lang-select-dropdown">
                    <el-dropdown-item><div v-if="autoView" v-track="$track.formatParams('TO_DETAIL', null, 'LIST_OPERATION')" @click="goProductRegisterView(scope.row.id)"> {{$t('common.base.detail')}}</div></el-dropdown-item>
                    <el-dropdown-item><div v-track="$track.formatParams('SAVE_TO_CUSTOMER', null, 'LIST_OPERATION')" @click="saveTo('customer', scope.row.id, scope.row)"> {{$t('common.pageTitle.pageCustomerRegisterCreate')}}</div></el-dropdown-item>
                    <el-dropdown-item><div v-track="$track.formatParams('SAVE_TO_PRODUCT', null, 'LIST_OPERATION')" @click="saveTo('product', scope.row.id, scope.row)"> {{$t('common.pageTitle.pageCustomerProductRegisterCreate')}}</div></el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <div v-else>
                  <el-button
                    type="text"
                    class="operate-primary"
                    v-if="autoView"
                    v-track="$track.formatParams('TO_DETAIL', null, 'LIST_OPERATION')"
                    @click="goProductRegisterView(scope.row.id)">
                    {{$t('common.base.detail')}}
                  </el-button>
                </div>
              </template>
              <template v-else-if="column.formType === 'relationProduct'">
                {{getRelationProductString(column, scope.row)}}
              </template>

              <template v-else>
                {{ $formatFormField(column, scope.row) }}
              </template>
              
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- end 表格 -->

      <!-- start 表格底部 -->
      <div ref="tableFooterContainer" class="table-footer bbx-normal-table-footer-10">
        <div class="list-info">
          <i18n path="common.base.table.totalCount">
            <span place="count" class="level-padding">{{ page.total || 0 }}</span>
          </i18n>
          <template v-if="multipleSelection&&multipleSelection.length>0">
            <i18n path="common.base.table.selectedNth">
              <span place="count" class="product-template-selected-count" @click="panelTheMultipleSelectionShow = true">{{ multipleSelection.length }}</span>
            </i18n>
            <span class="product-template-selected-count" @click="selectionToggle()">{{$t('common.base.clear')}}</span>
          </template>
        </div>
        <el-pagination
          class="product-template-table-pagination"
          background
          @current-change="jump"
          @size-change="handleSizeChange"
          :page-sizes="defaultTableData.defaultPageSizes"
          :page-size="page.pageSize"
          :current-page="page.pageNum"
          layout="prev, pager, next, sizes, jumper"
          :total="page.total">
        </el-pagination>
      </div>
      <!-- end 表格底部 -->

    </div>
    <!-- end content -->

    <!-- start 导入产品 -->
    <base-import
      title="导入产品注册信息"
      ref="importProductTemplateModal"
      @success="search"
      action="/excels/productTemplateImport">
      <div slot="tip">
        <div class="base-import-warn">
          <i18n path="common.base.importModal.downloadTemplateTip">
            <a place="link" href="/product/importTemplate/template">{{$t('common.base.importModal.importTemplate')}}</a>
          </i18n>
        </div>
      </div>
    </base-import>
    <!-- end 导入客户 -->

    <!-- start 导出 -->
    <base-export
      ref="exportProductTemplatePanel"
      :storage-key="exportStorageKey"
      :columns="exportColumns()"
      :build-params="exportParamsBuild"
      :validate="exportCountCheck"
      :needObjReq="true"
      method="post"
      action="/excels/register/export"/>
    <!-- end 导出 -->

    <!-- start 已选择列表 -->
    <base-panel :show.sync="panelTheMultipleSelectionShow" width="420px">
      <h3 slot="title">
        <span>{{$t('product.register.registeredMessage')}}({{ multipleSelection.length }})</span>
        <i 
          v-if="multipleSelection.length > 0"
          class="iconfont icon-qingkongshanchu product-template-panel-btn" 
          @click="selectionToggle()" 
          :title="$t('common.base.tip.clearChoseDataTip')" data-placement="right" v-tooltip></i>
      </h3>

      <div class="product-template-selected-panel">
        <div class="product-template-selected-tip" v-if="multipleSelection.length <= 0">
          <img :src="noDataImage">
          <p>{{$t('common.base.tip.noSelectedDataFromList')}}</p>
        </div>
        <template v-else>
          <div class="product-template-selected-list">
            <div class="product-template-selected-row product-template-selected-head">
              <span class="product-template-selected-name">{{$t('common.label.productName')}}</span>
              <span class="product-template-selected-sn">{{$t('common.fields.productNo.displayName')}}</span>
            </div>
            <div class="product-template-selected-row" v-for="item in multipleSelection" :key="item.id" >
              <span class="product-template-selected-name">{{ item.productName }}</span>
              <span class="product-template-selected-sn">{{ item.serialNumber }}</span>
              <el-button class="product-template-selected-delete" @click="selectProductTemplateCancel(item)">
                <i class="iconfont icon-fe-close"></i>
              </el-button>
            </div>
          </div>
        </template>
      </div>
    </base-panel>
    <!-- end 已选择列表 -->
    
    <!-- <base-table-advanced-setting ref="advanced" @save="columnStatusModify"/> -->
    <biz-select-column
      ref="advanced"
      mode="productRegister"
      class="product-register-column-select"
      :sotrage-key="'productRegister_select_colum'"
      @save="saveColumnStatus" />
    
    <saveToCustomer
      v-if="saveToData.customer.visibleProp"
      :id="saveToData.id"
      :total="saveToData.customer.saveToTotal"
      :visible-prop="saveToData.customer.visibleProp"
      @changeVisibleProp="e => saveToData.customer.visibleProp = e"
      @confirm="saveToC"
    />
    <saveToProduct
      v-if="saveToData.product.visibleProp"
      :id="saveToData.id"
      :total="saveToData.product.saveToTotal"
      :visible-prop="saveToData.product.visibleProp"
      @changeVisibleProp="e => saveToData.product.visibleProp = e"
      @confirm="saveToP"
    />
  </div>
  <!-- end 产品模板列表 -->
</template>

<script>
// pageDes 产品注册列表
import _ from "lodash";
import Page from "@model/Page";
import platform from "@src/platform"
import { safeNewDate } from '@src/util/time';
import { getSortableMinWidth, defaultTableData } from '@src/util/table';

import {
  getRegisterFields,
  getRegisterList,
  registerDelete,
  getProductList,
} from '@src/api/productRegisterApi'

import SearchPanel from './component/SearchPanel.vue';
/* mixin */
import ThemeMixin from '@src/mixins/themeMixin/index.ts';
import VersionMixin from '@src/mixins/versionMixin/index.ts';
import mixinForSaveTo from '../utils/mixinForSaveTo'

import AuthMixin from '@src/mixins/authMixin'

/* 高级搜索面板 列数 */
const PRODUCT_TEMPLATE_LIST_ADVANCE_SEARCH_COLUMN_NUMBER = "product_template_list_advance_search_column_number";
/* 高级搜索 搜索数据 */
// const STORE_USER_FOR_SEARCH_PRODUCT_TEMPLATE = "store_user_for_search_product_template";
// 产品注册列表数据
const PRODUCT_REGISTER_LIST_DATA = "product_register_list_data";

import { getFieldValue2string } from '@service/TaskService.ts'

import { openAccurateTab } from '@src/util/platform';
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import { getSystemNormalSearchInputForLength } from '@model/utils/getSystemConfig.ts'
import { formatDate, useFormTimezone } from 'pub-bbx-utils'
const { disposeFormListViewTime } = useFormTimezone()
import StorageKeyEnum from '@model/enum/StorageKeyEnum'
import { getOssUrl } from '@src/util/assets'
const noDataImage = getOssUrl('/no_data.png')
export default {
  name: 'product-template-list-view',
  mixins: [mixinForSaveTo, VersionMixin, ThemeMixin, AuthMixin],
  props: {
    initData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      defaultTableData,
      noDataImage,
      exportStorageKey: StorageKeyEnum.ProductRegisterExport,
      columns: [], // 列
      columnNum: 1, // 高级搜索 列数

      loadingListData: true, // 加载列表数据
      multipleSelection: [], // 已选择列表
      selectedLimit: 500, // 最大选择数量
      page: new Page(), // page 对象
      panelTheMultipleSelectionShow: false, // 已选择列表 面板显示
      productRegisterConfig: {
        productRegisterConfig: {},
        productFields: []
      }, // 产品配置项
      searchModel: {
        keyword: "",
        pageSize: 10,
        pageNum: 1,
        orderDetail: {},
        moreConditions: {
          conditions: [],
        },
      },
      fieldsInfo:[],

      selectColumnState: 'product_register_list_select',
      
      defaultField: [
        {
          displayName: this.$t('common.base.dataSources'),
          fieldName: 'dataSourceStr',
          formType: 'select',
          isSystem: 1,
          tableName: 'productRegister'
        },
        {
          displayName: this.$t('common.label.status'),
          fieldName: 'registerStatusStr',
          formType: 'select',
          isSystem: 1,
          tableName: 'productRegister'
        },
        {
          displayName: this.$t('common.label.createUser'),
          fieldName: 'createUname',
          formType: 'user',
          isSystem: 1,
          tableName: 'productRegister'
        }, 
        {
          displayName: this.$t('common.label.createTime'),
          fieldName: 'createTime',
          formType: 'datetime',
          isSystem: 1,
          tableName: 'productRegister'
        },
        {
          displayName: this.$t('common.label.updateTime'),
          fieldName: 'updateTime',
          formType: 'datetime',
          isSystem: 1,
          tableName: 'productRegister'
        },
        {
          displayName: this.$t('common.label.operate'),
          fieldName: 'operation',
          formType: 'operation',
          tableName: 'productRegister',
          isSystem: 1,
          show: 'important',
          fixed: 'right'
        }
      ],
      defaultSearchField: [
        {
          displayName: this.$t('common.base.dataSources'),
          fieldName: 'dataSource',
          formType: 'select',
          isSystem: 1,
          setting: {
            isMulti: false,
            dataSource: [
              {
                text: this.$t('common.fields.customerRegisteredSource.options.all'),
                value: ''
              },
              {
                text: this.$t('common.fields.customerRegisteredSource.options.companyCreate'),
                value: '1'
              },
              {
                text: this.$t('common.fields.customerRegisteredSource.options.userRegister'),
                value: '2'
              }
            ]
          }
        },
        {
          displayName: this.$t('common.label.status'),
          fieldName: 'registerStatus',
          formType: 'select',
          isSystem: 1,
          setting: {
            isMulti: false,
            dataSource: [
              {
                text: this.$t('common.base.all'),
                value: ''
              },
              {
                text: this.$t('common.base.usualStatus.toBeReviewed'),
                value: '0'
              },
              {
                text: this.$t('common.base.usualStatus.passed'),
                value: '1'
              },
              {
                text: this.$t('common.base.usualStatus.rejected'),
                value: '2'
              }
            ]
          }
        },
        {
          displayName: this.$t('common.label.createUser'),
          fieldName: 'createUname',
          formType: 'text',
          isSystem: 1,
        }, 
        {
          displayName: this.$t('common.label.createTime'),
          fieldName: 'createTime',
          formType: 'datetime',
          isSystem: 1,
        },
        {
          displayName: this.$t('common.label.updateTime'),
          fieldName: 'updateTime',
          formType: 'datetime',
          isSystem: 1,
        }
      ],

      formFields: [],
      tableContainerHeight:'440px',
    }
  },
  computed: {
    // 高级搜索 占位符
    advancedSearchPlaceholder() {
      let fields = this.fieldsInfo || [];
      return {
        name: fields.filter(f => f.fieldName == "name")[0].placeHolder || "",
        serialNumber: fields.filter(f => f.fieldName == "serialNumber")[0].placeHolder || "",
        type: fields.filter(f => f.fieldName == "name")[0].placeHolder || "",
      }
    },
    loginUser() {
      return this.initData?.loginUser || {};
    },
    auth() {
      return this.loginUser.authorities || {};
    },
    // 新建权限
    authCreate() {
      // return true
      return this.auth.PRODUCT_REGISTER_CREATE;
    },
    // 删除权限
    authDelete() {
      return this.auth.PRODUCT_REGISTER_DELETE;
    },
    // 查看权限
    autoView() {
      return this.auth.PRODUCT_REGISTER_VIEW;
    },
    // 导出权限
    authExport() {
      return this.auth.canProductRegisterImport || this.canProductRegisterExport
    },
    canProductRegisterImport() {
      return this.auth?.PRODUCT_REGISTER_IMPORT;
    },
    canProductRegisterExport() {
      return this.auth?.PRODUCT_REGISTER_EXPORT
    },
    /* 已选择 id列表 */
    selectedIds() {
      return this.multipleSelection.map(item => item.id) || [];
    },
    fieldsForSearch() {
      return this.defaultSearchField
      .sort((a, b) => {
        a.orderId - b.orderId
      })
      // return [...this.defaultSearchField, ...this.formFields]
    },
  },
  filters: {
    formatDate(val) {
      if (!val) return "";
      return formatDate(val, "YYYY-MM-DD HH:mm:ss")
    },
  },
  async mounted() {
    let { status, data, message } = await getRegisterFields();
    if( status == 0 ){
      data = this.fieldsFilter(data || [])
      this.formFields = data
      this.fieldsInfo = [...data, ...this.defaultField]
      this.fieldsInfo.forEach(v => {
        v.show = v.isSystem ? v.show ? v.show : true : v.show
        v.tableName = 'productRegister'
      })
    }
    this.productRegisterConfig = {
      productConfig: (this.initData && this.initData.productConfig) || {productType: []},
      productFields: (this.fieldsInfo || []).sort((a, b) => a.orderId - b.orderId)
    };

    this.paramsSearchRevert();
    this.columns = this.buildTableColumn();
    this.search();
    let that_ = this;
    // 监听切换后需要重新计算列表高度 后续可以用activated生命周期替换
    window.addEventListener('message', (event)=> {
      const {action, data} = event.data;
      if (action == 'shb.frame.activatedPage'){
        that_.$nextTick(()=> {
          that_.knowTableContainerHeight();
        })
      }
    });
    this.$nextTick(()=> {
      this.knowTableContainerHeight()
      window.onresize = _.debounce(()=>{
        that_.knowTableContainerHeight()
      }, 500)
    })
    // [tab_spec]标准化刷新方式
    window.__exports__refresh = this.search;
  },
  methods: {
    fieldsFilter(fields) {
      return fields.filter(field => {
        let removeTypes = ['attachment', 'info', 'separator', 'autograph']
        // let flag1 = !removeTypes.includes(field.formType)
        // let flag2 = true
        // if (field.formType === 'relationProduct') {
        //   let setting = field.setting || {}
        //   flag2 = !removeTypes.includes(setting.formType)
        // }
        return !removeTypes.includes(field.formType)
      })
    },
    getRelationProductString(column, row) {
      try {
        let fieldName = column.setting.fieldName
        let formType = column.setting.formType
        let info = {
          attribute: {}
        }
        let setObj = fieldName.startsWith('field_') ? info.attribute : info
        let setData = column.fieldName.startsWith('field_') ? (row.attribute || {})[column.fieldName] : row[column.fieldName]
  
        setObj[fieldName] = setData
        
        return getFieldValue2string(info, fieldName, formType, [{
          fieldName,
          formType,
          setting: column.setting
        }], false)
      } catch(err) {
        // 产品关联的字段映射可能性较多，容易出问题，加上这边是即时渲染，一旦报错列表全跪，所以用try catch，包裹下
        console.log(err)
        return ''
      }
    },
    showAdvancedSetting(){
      window.TDAPP.onEvent("pc：产品注册管理-选择列事件");

      this.$refs.advanced.open(this.columns);
    },
    buildParams() {
      const sm = Object.assign({}, this.searchModel);
      let params = {
        keyword: getSystemNormalSearchInputForLength(sm.keyword),
        pageSize: sm.pageSize,
        pageNum: sm.pageNum,
      };

      if (Object.keys(sm.orderDetail || {}).length) {
        params.orderDetail = sm.orderDetail;
      }

      if (Object.keys(sm.moreConditions).length > 1 || sm.moreConditions.conditions.length) {
        params = {
          ...params,
          ...sm.moreConditions,
        }
      }

      return params
    },
    buildDefaultColumns(){
      return [
        "name",
        "customer",
        "serialNumber",
        "type"
      ]
    },
    // 构建表格列
    buildTableColumn() {
      const localStorageData = this.getLocalStorageData();
      // const localStorageData = this.localStorageGet(PRODUCT_REGISTER_LIST_DATA);
      let columnStatus = localStorageData.columnStatus && localStorageData.columnStatus[this.selectColumnState] || [];

      let localColumns = columnStatus
        .map(i => typeof i == "string" ? {field: i, show: true} : i)
        .reduce((acc, col) => (acc[col.field] = col) && acc, {});

      let fields;
      let productFields = this.productRegisterConfig.productFields
      if(columnStatus.length){
        fields=[];
        columnStatus.forEach(item => {
          const field = productFields.find(p => p.fieldName === item.field);
          field && fields.push(field);
        });
        const extra = productFields.filter(item => !columnStatus.find(c => c.field === item.fieldName));
        fields.push(...extra);
      }else{
        fields = productFields;
      }

      let customizedColumns = fields
        .map(field => {
          let sortable = false;
          let minWidth = null;

          // 自定义字段暂不支持排序
          if (['qrcodeId', 'serialNumber', 'createTime', 'updateTime'].includes(field.fieldName)) {
            sortable = "custom";
            minWidth = 100;
          }

          if (field.displayName.length > 4) {
            minWidth = field.displayName.length * 20;
          }

          if (sortable && field.displayName.length >= 4) {
            minWidth = getSortableMinWidth(field)
          }

          if (['date', 'datetime'].includes(field.formType)) {
            minWidth = Math.max(150, minWidth);
          }
          if (field.formType === "operation") {
            minWidth = 120;
          }


          return {
            ...field,
            label: field.displayName,
            field: field.fieldName,
            formType: field.formType,
            minWidth: typeof minWidth == "number" ? minWidth : `${minWidth}px`,
            sortable,
            isMulti: field.setting && field.setting.isMulti,
            isSystem: field.isSystem,
          };
        });

      let columns = [...customizedColumns].map(col => {
        let show = col.show ? col.show : false;
        let { width } = col;
        let localField = localColumns[col.field];
        let fixLeft = localField?.fixLeft || null;
        if(localField){
          width = typeof localField.width == "number" ? `${localField.width}px` : ""
          show = localField.show ? localField.show : false;
        }

        col.show = show;
        col.width = width;
        col.type = "column";
        col['fixLeft'] = fixLeft && 'left'
        return col;
      });

      return columns;
    },
    // 修改列状态
    // columnStatusModify(event) {
    //   let columns = event.data || [];
    //   let colMap = columns.reduce((acc, col) => (acc[col.field] = col) && acc, {});

    //   this.columns.forEach(col => {
    //     let newCol = colMap[col.field];
    //     if(null != newCol) {
    //       this.$set(col, "show", newCol.show);
    //       this.$set(col, "width", newCol.width);
    //     }
    //   })

    //   const columnsStatus = this.columns.map(c => ({field: c.field, show: c.show, width: c.width}));
    //   this.localStorageSet("columnStatus", columnsStatus, PRODUCT_REGISTER_LIST_DATA);
    // },
    // 连接数组和 key去重
    concatArrayAndItemUnique(arr1, arr2, key) {
      // 数组中的对象根据id去重
      let obj = {};
      if (!arr1 || !arr1.length) return arr2 || [];
      if (!arr2 || !arr2.length) return arr1 || [];
      return [...arr1, ...arr2].reduce((cur, next) => {
        obj[next[key]] ? "" : obj[next[key]] = true && cur.push(next);
        return cur;
      }, []);
    },
    /** 把对象中!!为false的值去除（eg. false, undefined, null...），except 可以把想保留的值留下(eg.[0])
    * 主要用于向后端传参，把无用的空值过滤掉
    * var a = { a: 0, b: 1, c: null, d: undefined, e: false}
    * deleteValueFromObject(a) =>  {b: 1}
    * deleteValueFromObject(a, [0]) =>  {a: 0, b: 1}
    */
    deleteValueFromObject(sourceObj, except = []) {
      let obj = _.cloneDeep(sourceObj);
      if (except.length) {
        Object.keys(obj)
          .forEach(key => {
            if (typeof obj[key] === "object" && obj[key]) {
              obj[key] = this.deleteValueFromObject(obj[key], except);
            }
            if (!obj[key] && except.every(ex => ex !== obj[key])) {
              delete obj[key];
            }
          });
      } else {
        Object.keys(obj)
          .forEach(key => {
            if (typeof obj[key] === "object" && obj[key]) {
              obj[key] = this.deleteValueFromObject(obj[key]);
            }
            if (!obj[key]) {
              delete obj[key];
            }
          });
      }
      if (Object.keys(obj).length) {
        return obj;
      } 
      return undefined;
    },
    // 构建产品注册导出参数
    exportParamsBuild(checkedArr, ids) {
      let exportAll = !ids || ids.length == 0;
      let registerSearchInput = exportAll ? this.buildParams() : {idList: ids};
      let fieldList = checkedArr
  
      return {
        checked: void 0,
        ids: void 0,
        fieldList,
        registerSearchInput
        // JSON.stringify(registerSearchInput)
      };
    },
    // 导出 列
    exportColumns() {
      return this.columns.map(c => {
        c.export = c.fieldName !== 'operation';

        let fieldName = ''
        if (c.fieldName === 'createUser') {
          fieldName = 'createUname'
        }

        return fieldName ? c : {
          ...c,
          fieldName
        };
      });
    },
    /** 
    * 导出产品
    * @param {Boolean} exportAll -- 是否导出全部
    */
    exportProduct(exportAll = false) {
      let ids = [];
      let fileName = this.$t('product.register.productRegisterTemplete', {date: formatDate(safeNewDate(), "YYYY-MM-DD")});

      if (!exportAll) {
        if (!this.multipleSelection.length) return this.$platform.alert(this.$t('common.base.tip.exportUnChooseTip'));
        ids = this.selectedIds;
      }
      this.$refs.exportProductTemplatePanel.open(ids, fileName);
    },
    // 检测导出条数
    exportCountCheck(ids, max){
      let exportAll = !ids || ids.length == 0;

      return exportAll && this.page.total > max ? this.$t('common.base.exportModal.oversizeTips', {size: max}) : null;
    },
    // 跳转产品注册信息详情
    goProductRegisterView(id) {
      let fromId = window.frameElement.getAttribute("id");

      // this.$platform.openTab({
      //   id: `product_register_detail_${id}`,
      //   title: "产品注册信息",
      //   close: true,
      //   url: `/product/register/detail/${id}`,
      //   fromId
      // })
      openAccurateTab({
        type: PageRoutesTypeEnum.PageProductRegisterDetail,
        key: id,
        fromId
      })
    },
    // 页码数切换
    handleSizeChange(pageSize) {
      this.searchModel.pageSize = pageSize;
      this.searchModel.pageNum = 1;

      this.localStorageSet("pageSize", pageSize, PRODUCT_REGISTER_LIST_DATA);
      this.search();
    },
    // 跳转
    jump(pageNum) {
      this.searchModel.pageNum = pageNum;
      this.search();
    },
    /* 获取本地数据 */
    localStorageGet(key) {
      try {
        const dataStr = localStorage.getItem(key) || "{}"
        return JSON.parse(dataStr); 
      } catch (error) {
        console.log("error: ", error);
        return {}
      }
    },
    /* 设置本地数据 */
    localStorageSet(key, value, rootKey = null) {
      try {
        if(!rootKey) {
          localStorage.setItem(key, JSON.stringify(value));
        } else {
          const data = this.localStorageGet(rootKey);
  
          data[key] = value;
          localStorage.setItem(rootKey, JSON.stringify(data));
        }
      } catch(err) {
        console.log("localStorageSet err", err)
      } 
    },
    // 批量匹配选中
    matchSelected() {
      if (!this.multipleSelection.length) return;

      const selected = this.page.list
        .filter(c => {
          if (this.multipleSelection.some(sc => sc.id === c.id)) {

            this.multipleSelection = this.multipleSelection.filter(sc => sc.id !== c.id);
            this.multipleSelection.push(c);
            return c;
          }
        }) || [];

      this.$nextTick(() => {
        this.selectionToggle(selected);
      });
    },
    /** 
     * 打开弹窗
     * @param {String} type -- 弹窗类型
     */
    openDialog(type) {
      // 导出产品
      if (type === "importProduct") {
        this.$refs.importProductTemplateModal.open();
      }
    },
    // 搜索
    search() {
      const params = this.buildParams();

      this.loadingListData = true;
      return getRegisterList(params)
        .then(res => {
          if(res.status !== 0) return
          res = res.data
          if (!res || !res.list) {
            this.page = new Page();
          } else {
            res.list = disposeFormListViewTime(res.list, this.columns)
            // res.list.forEach(v => {
            //   v.attribute = JSON.parse(v.attribute) || {}
            // })
            this.page.merge(res)

            this.page.list = res.list
              .map(item => {
                let attribute = item.attribute || {};

                let list = {
                  ...item,
                  ...attribute,
                }

                return list;
              });
              
            // 把已选中的匹配出来
            this.matchSelected();
          }

          return res;
        })
        .then(() => {
          this.$refs.productTemplateListPage.scrollTop = 0;
          this.loadingListData = false;
        })
        .catch(err => {
          this.loadingListData = false;
          console.error("err", err);
        })
    },
    // 设置高级搜索面板 列
    setAdvanceSearchColumn(command){
      this.columnNum = Number(command);
      try {
        localStorage.setItem(PRODUCT_TEMPLATE_LIST_ADVANCE_SEARCH_COLUMN_NUMBER, this.columnNum); 
      } catch (error) {
        console.log(error)
      }
    },
    // 取消选择的产品
    selectProductTemplateCancel(productItem) {
      if (!productItem || !productItem.id) return;

      this.multipleSelection = this.multipleSelection.filter(ms => ms.id !== productItem.id);
      this.multipleSelection.length < 1 ? this.selectionToggle() : this.selectionToggle([productItem]);
    },
    // 切换已选择
    selectionToggle(rows) {
      let isNotOnCurrentPage = false;
      let item = undefined;
      let row = undefined;

      if (rows) {
        for(let i = 0; i < rows.length; i++) {
          row = rows[i];
          isNotOnCurrentPage = this.page.list.every(item => {
            return item.id !== row.id;
          })
          if(isNotOnCurrentPage) return 
        }
        rows.forEach(row => {
          this.$refs.productTemplateTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.productTemplateTable.clearSelection();
        this.multipleSelection = [];
      }
    },

    // 操作选择
    selectionHandle(selection) {
      let tv = this.selectionCompute(selection);

      let original = this.multipleSelection
        .filter(ms => this.page.list.some(cs => cs.id === ms.id));

      let unSelected = this.page.list
        .filter(c => original.every(oc => oc.id !== c.id));

      if (tv.length > this.selectedLimit) {
        this.$nextTick(() => {
          original.length > 0
            ? unSelected.forEach(row => {
              this.$refs.productTemplateTable.toggleRowSelection(row, false);
            })
            : this.$refs.productTemplateTable.clearSelection();
        })
        return this.$platform.alert(this.$t('common.base.tip.maxDataCanChooseTips', {data1: this.selectedLimit}));
      }

      this.multipleSelection = tv;

      this.$refs.baseSelectionBar?.openTooltip();
      this.$nextTick(()=>{
        this.knowTableContainerHeight()
      })
    },
    // 计算已选择
    selectionCompute(selection) {
      let tv = [];
      
      tv = this.multipleSelection
        .filter(ms => this.page.list.every(c => c.id !== ms.id));
      tv = _.uniqWith([...tv, ...selection], _.isEqual);

      return tv;
    },
    sortChange(option) {
      /**
       * 目前情况：
       * 所有字段理应后台获取，但是获取的所有字段中没有 createTime
       *
       */
      try {
        const {prop, order} = option;
        if (!order) {
          this.searchModel.orderDetail = {};
          return this.search();
        }

        const isSystem = ['createTime', 'updateTime', 'type', 'serialNumber'].includes(prop) ? 1 : 0

        let sortModel = {
          isSystem,
          sequence: order === "ascending" ? "ASC" : "DESC",
          column: prop,
        };

        if (prop === 'qrcodeId') sortModel.column = 'qrcodeId' 

        const sortedField = this.productRegisterConfig.productFields.filter(sf => sf.fieldName === prop)[0] || {};

        if (['createTime', 'updateTime'].includes(prop) || ('date', 'datetime').includes(sortedField.formType)) {
          sortModel.type = "date";
        } else {
          sortModel.type = sortedField.formType;
        }

        this.searchModel.orderDetail = sortModel;

        this.search();

      } catch (e) {
        console.error("product template sortChange err", e);
      }
    },
    // 搜索参数恢复
    paramsSearchRevert() {
      const localStorageData = this.localStorageGet(PRODUCT_REGISTER_LIST_DATA);

      if (localStorageData && localStorageData.pageSize) {
        this.searchModel.pageSize = Number(localStorageData.pageSize);
      }

      const num = localStorage.getItem(PRODUCT_TEMPLATE_LIST_ADVANCE_SEARCH_COLUMN_NUMBER) || 1;
      this.columnNum = Number(num);
    },
    toCreate() {
      window.TDAPP.onEvent('pc：产品注册-新建事件');
      let fromId = window.frameElement.getAttribute('id');

      // this.$platform.openTab({
      //   id: 'product_register_create',
      //   title: '新建产品注册',
      //   url: '/product/register/create',
      //   reload: true,
      //   close: true,
      //   fromId,
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageProductCreateRegister,
        reload: true,
        fromId
      })
    },
    // 产品注册 删除
    async productRegisterDelete() {
      window.TDAPP.onEvent('pc：产品注册-删除事件');

      if(this.multipleSelection.length <= 0) return platform.alert(this.$t('common.validate.selectMessageDelete'));
      
      const confirm = await platform.confirm(this.$t('common.validate.confirmDeleteProduct'));
      if(!confirm) return

      try {
        this.loadingListData = true;
        let result = await registerDelete({
          ids: this.selectedIds.join(",")
        });
        const isSucc = (result.status == 0);

        this.$platform.notification({
          title: this.$t('common.label.deleteProductSuccess', {status: isSucc ? this.$t('common.base.success') : this.$t('common.base.fail')}),
          message: !isSucc && result.message,
          type: isSucc ? "success" : "error",
        });

        if(isSucc) {
          this.selectionToggle();
          this.search();
        } else {
          this.loadingListData = false;
        }

      } catch(err) {
        console.log(`productDelete err ${err}`)
      }
    },
    panelSearchAdvancedToggle() {
      window.TDAPP.onEvent("pc：产品模板-高级搜索事件");
      this.$refs.searchPanel.open();

      this.$nextTick(() => {
        let forms = document.getElementsByClassName("advanced-search-form");
        for(let i = 0; i < forms.length; i++) {
          let form = forms[i];
          form.setAttribute("novalidate", true)
        }
      })
    },
    /**  
     * @description 全量搜索
    */
    powerfulSearch() {
      this.searchModel.pageNum = 1;
      this.searchModel.moreConditions = this.$refs.searchPanel.buildParams();

      this.trackEventHandler("search");
      this.search();

    },
    resetParams() {
      window.TDAPP.onEvent("pc：产品模板-重置事件");
      this.searchIncludeMoreConditions = false;
      this.searchModel = {
        keyword: "",
        pageNum: 1,
        pageSize: this.page.pageSize,
        orderDetail: {},
        moreConditions: {
          conditions: [],
        }
      };

      this.$refs.searchPanel.resetParams();
      this.search();
    },
    // TalkingData事件埋点
    trackEventHandler (type) {
      if (type === "search") {
        window.TDAPP.onEvent("pc：产品模板-搜索事件");
        return;
      }
      if (type === "moreAction") {
        window.TDAPP.onEvent("pc：产品管理-更多操作事件");
        return;
      }
    },
    getRowKey(row) {
      return row.id
    },
    // 处理人员显示
    getUserName(field, value) {
      // 多选
      if(Array.isArray(value)) {
        return value.map(i => i.displayName || i.name).join(",");
      }

      let user = value || {};
      return user.displayName || user.name;
    },
    /**
     * @description 修改选择列设置
     * @param {Object} event 事件对象
     */
    saveColumnStatus (event) {
      let columns = event.data || [];

      this.columns = [];

      this.$nextTick(() => {
        this.$set(this, 'columns', columns.slice());
        this.saveColumnStatusToStorage();
      });
      this.$message.success(this.$t('common.base.saveSuccess'));
    },

    saveColumnStatusToStorage () {
      const localStorageData = this.getLocalStorageData();
      let columnsStatus = null;

      // 判断是否存储选择列
      const columnsList = this.columns.map((c) => ({
        field: c.field,
        show: c.show,
        width: c.width,
        fixLeft: c.fixLeft
      }));

      if (localStorageData.columnStatus) {
        localStorageData.columnStatus[
          `${this.selectColumnState}`
        ] = columnsList;
        columnsStatus = localStorageData.columnStatus;
      } else {
        columnsStatus = {
          [`${this.selectColumnState}`]: columnsList,
        };
      }

      this.saveDataToStorage(`columnStatus`, columnsStatus);
    },
    getLocalStorageData () {
      const dataStr = localStorage.getItem( `product_register_list_localStorage`) || '{}';
      return JSON.parse(dataStr);
    },
    saveDataToStorage (key, value) {
      const data = this.getLocalStorageData();
      data[key] = value;
      localStorage.setItem(
        `product_register_list_localStorage`,
        JSON.stringify(data)
      );
    },

    // 跳转对应的产品详情
    async toRelationProductDetail(id) {
      let params = {
        id,
        pageNum: 1,
        pageSize: 1
      }
      let result = await getProductList(params);
      result = result.data
      if (!result || !result.list) return;

      let product = result.list[0]
      this.toProductDetail(product.id)

      return result;
    },
    // 跳转产品详情
    toProductDetail(id) {
      
      if (!this.globalIsHaveProductViewDetailAuth) return
      
      let fromId = window.frameElement.getAttribute('id');
      // this.$platform.openTab({
      //   id: `product_view_${id}`,
      //   title: '产品详情',
      //   close: true,
      //   url: `/customer/product/view/${id}?noHistory=1`,
      //   fromId,
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageProductView,
        key: id,
        params: 'noHistory=1',
        fromId
      })
    },
    // 跳转产品类型详情
    toProductTypeDetail(id) {
      let fromId = window.frameElement.getAttribute('id');
      // this.$platform.openTab({
      //   id: `productV2_catalog_view_${id}`,
      //   title: '产品类型详情',
      //   close: true,
      //   url: `/productV2/catalog/view?id=${id}`,
      //   fromId
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageProductV2CatalogView,
        key: id,
        params: `id=${id}`,
        fromId
      })
    },
    /**
     * @des 获取列表当前的可滚动高度
     */
		 knowTableContainerHeight(){
      let min = 440;
      try {
        let window_ = window.innerHeight;
        let header = this.$refs.tableHeaderContainer?.offsetHeight || 0;
        let do_ = this.$refs.tableDoContainer?.offsetHeight || 0;
        let footer = this.$refs.tableFooterContainer?.offsetHeight || 0;
        let selection = this.$refs.BaseSelectionBarComponent?.offsetHeight || 0;
        // selection = selection ? selection + 8 : selection;
        min = window_ - header * 1 - do_ * 1 - footer * 1 - selection * 1  - 20 - 12;
        console.log(window_, header, do_, footer, selection, 'window_, header, do_, footer, selection');
        console.log(min, 'min')
        min = min > 440 ? min : 440;
      } catch (error) {
        console.warn(error, 'error try catch');
      }
      this.$set(this, 'tableContainerHeight', `${min}px`)
    },
    /**
     * @des 反馈创建来源
     */
    findDataSourceDes(item){
      try {
        let arr = this.defaultSearchField.find(i=>i.fieldName == 'dataSource').setting.dataSource;
        let obj = item && arr.find(i=>i.value == item);
        return obj.text
      } catch (error) {
        console.warn(error, 'error try catch');
        return ''
      }
    },
    /**
     * @des 反馈状态
     */
    findStatusDes(item){
      try {
        let arr = this.defaultSearchField.find(i=>i.fieldName == 'registerStatus').setting.dataSource;
        let obj = arr.find(i => i.value === (item + ''));
        return obj.text
      } catch (error) {
        console.warn(error, 'error try catch');
        return ''
      }
    }
  },
  components: {
    [SearchPanel.name]: SearchPanel
  }
}
</script>

<style lang="scss">

html, body {
  height: 100%;
}
.product-template-list-view {
  height: 100%;
  overflow: auto;
  padding: 10px;

  .panel-title {
    border-bottom: 1px solid rgb(242, 248, 247);
    color: rgb(132, 138, 147);

    font-size: 16px;
    font-weight: normal;
    line-height: 60px;

    display: flex;
    justify-content: space-between;

    padding: 0 25px;

    .iconfont:hover {
      cursor: pointer;
    }

  }
}

// search
.product-register-list-search-group {

  .advanced-search-function, .base-search {
    background: #fff;
    border-radius: 4px;
  }

  .base-search {
    font-size: 14px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 16px;

    .product-template-list-base-search-group {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .el-input {
        width: 400px;
        input {
          border-radius: 4px 0 0 4px
        }
      }

      a {
        line-height: 33px;
      }

    }

    .advanced-search-visible-btn {
      background: #fff;
      border-color: $color-primary;
      @include fontColor();
      font-size: 14px;
      height: 32px;
      line-height: 32px;
      white-space: nowrap;
      padding: 0;
      margin-left: 25px;

      &:hover {
        cursor: pointer;
      }
    }
  }
}

.advanced-search-form {

  .two-columns {
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
      width: 50%;
    }
  }

  .el-form-item {
    .el-form-item__content,
    .el-select,
    .base-dist-picker,
    .el-cascader,
    .el-date-editor {
      width: 290px !important;
    }
  }

  .advanced-search-btn-group {
    background: #fff;

    display: flex;
    justify-content: flex-end;

    width: 100%;
    padding: 15px 20px;

    position: absolute;
    bottom: 0px;

    .base-button {
      margin: 0 10px;
    }
  }
}

.advanced-search-function {
  margin-top: 10px;
  padding-bottom: 10px;

  h4 {
    border-bottom: 1px solid #f4f4f4;
    padding: 10px;
  }

  .el-row {
    padding: 5px 0;
  }
  .input-label {
    text-align: right;
    line-height: 32px;
    padding-right: 0;
  }

}

// list 
.product-register-list-content {
  .product-template-table {
    // padding: 16px;
    border-top: none;

    &:before {
      height: 0;
    }

    .product-template-table-header th {
      background: #fafafa;
      color: $text-color-primary;
      font-weight: normal;
    }

    th {
      color: #333;
      font-size: 14px;
    }
    td {
      color: #666;
      font-size: 13px;
    }

    .view-detail-btn {
      @include fontColor();
    }

    .select-column .el-checkbox {
      position: relative;
      top: 3px;
    }
  }

  .table-footer {
    background: #fff;
    border-radius: 0 0 3px 3px;

    display: flex;
    justify-content: space-between;

    padding: 0px 10px 10px 10px ;

    .list-info {
      color: #767e89;

      font-size: 13px;
      line-height: 32px;

      margin: 0;

      .iconfont {
        position: relative;
        top: 1px;
      }
    }

    .el-pagination__jump {
      margin-left: 0;
    }
  }
}

.product-template-panel-btn{
  float: right;
  cursor: pointer;
  font-size: 14px;
  margin-right: 5px;

  &:hover{
    @include fontColor();
  }
}

// product-template selected panel 
.product-template-selected-count{
  cursor: pointer;
  @include fontColor();

  font-size: 13px;

  padding: 0 3px;
  width: 15px;

  text-align: center;
}

.product-template-selected-panel{
  font-size: 14px;
  height: calc(100% - 51px);
}

.product-template-selected-tip{
  padding-top: 80px;

  img{
    display: block;
    width: 160px;
    margin: 0 auto;
  }

  p{
    color: $text-color-regular;

    line-height: 20px;
    text-align: center;

    margin: 8px 0 0 0;
  }
}

.product-template-selected-list{
  height: 100%;
  padding: 10px;
  overflow-y: auto;
}

.product-template-selected-row{
  border-bottom: 1px solid #ebeef5;

  display: flex;
  flex-flow: row nowrap;

  font-size: 13px;
  line-height: 36px;


  &:hover{
    background-color: #f5f7fa;

    .product-template-selected-delete{
      visibility: visible;
    }
  }
}

.product-template-selected-head{
  background-color: #F0F5F5;
  color: #333;
  font-size: 14px;
}

.product-template-selected-sn{
  padding-left: 10px;
  flex: 1;
  @include text-ellipsis;
}

.product-template-selected-name{
  padding-left: 10px;
  width: 150px;
  @include text-ellipsis;
}

.product-template-selected-delete{
  width: 36px;
}

.product-template-selected-row button.product-template-selected-delete{
  background-color: transparent;
  color: #646B78;

  border: none;
  
  padding: 0;
  width: 36px;
  height: 36px;

  outline: none;
  visibility: hidden;

  i{
    font-size: 14px;
  }

  &:hover{
    color: #e84040;
  }
}

// operation
.product-template-columns-dropdown-menu {
  max-height: 300px;
  overflow: auto;
  .el-dropdown-menu__item{
    padding: 0;
  }
  .el-checkbox {
    width: 100%;
    padding: 5px 15px;
    margin: 0;
  }
}

.operation-bar-container {
  background: #fff;
  border-radius: 3px 3px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .top-btn-group .base-button {
    margin-right: 5px;
  }

  .action-button-group {
    .base-button {
      margin-left: 5px;
    }
  }

  .el-dropdown-btn {
    background-color: transparent;
    display: inline-block;
    line-height: 32px;
    outline: none;
    .iconfont {
      margin-left: 5px;
    }
    &:hover {
      background-color: transparent;
      cursor: pointer;
      @include fontColor();
    }
  }
}
</style>
<style lang="scss">
  @import "@src/assets/scss/common-list.scss";
  .base-selection-wrapper{
    padding:0;
  }
</style>

<style lang="scss" scoped>
  .product-register-list-content {
    padding: 0 16px;
    margin-top: 12px;
    background: #fff;
    border-radius: 4px;
  }
  .operation-bar-container {
    padding: 16px 0 12px !important;
  }
  .status-td {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .status-show {
    min-width: 52px;
    height: 22px;
    border-radius: 11px;
    font-size: 12px;
    text-align: center;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 22px;
    padding:0 8px 0 8px;
    &.is-pass {
      background: #52C41A;
    }
    &.on-audit {
      background: #FFA726;
    }
    &.is-reject {
      background: #FF4D4F;
    }
  }
  .link {
    color: $color-primary-light-6;
    cursor: pointer;
  }
  .cur-point {
    color: $color-primary-light-6;
  }
  .lang-select-dropdown {
    margin-top: 0!important;
  }
// ::v-deep .el-table__row, ::v-deep .el-table__header {
//   td:not(.is-hidden):last-child{
//     border-left:1px solid #EBEEF5;
//   }
// }

</style>

<style lang="scss">
  .product-register-column-select {
    .base-modal-body .biz-select-column-box .biz-select-column-body {
      overflow: hidden;
    }
  }
</style>